import React, { useState } from 'react'
import { UserOutlined, UnlockOutlined } from '@ant-design/icons';
import { Form, Input, Button } from 'antd';
import { useNavigate } from 'react-router-dom';
import { UseSelector,useDispatch } from 'react-redux';
import {setUser,addauthentication,delauthentication} from '../../store/model/counter'
import './login.less'
import axios from 'axios';
import useAuth from '../AuthContext';



export default function Login() {

  const navigate = useNavigate();
  const dispatch = useDispatch();
  // const auth = useAuth();

  const [isPhoneLogin, setIsPhoneLogin] = useState<boolean>(true);

  const [mobile, setMobile] = useState('')
  const [password, setPassword] = useState('')

  //输入的验证码
  const [inputCaptcha, setInputCaptcha] = useState('')
  //获取的验证码
  const [captcha, setCaptcha] = useState('')

  const handlePhoneLoginClick = () => {
    setIsPhoneLogin(true);
  };

  const handleCaptchaLoginClick = () => {
    setIsPhoneLogin(false);
  };

  const login = async () => {
    let { data: { code, msg, user, accessToken, secondToken } } = await axios.post("http://localhost:3000/login", {
      password: password,
      mobile: mobile
    })
    if (code === 200) {
      dispatch(setUser(user))
      localStorage.setItem('token', accessToken)
      localStorage.setItem('secondToken', secondToken)
      if (user.authentication ==null) {
        dispatch(delauthentication())
      }else{
        dispatch(addauthentication(user.authentication))
      }
      await axios.post("http://localhost:3000/addOperation",{
        feature:'登录',
        operation:user.username,
      })
    }
    // await auth.login(mobile, password);
    window.location.href = '/app/home'
    // navigate('/app/home')
  }

  //获取验证码
  const sendCroeCode = async () => {
    let { data: { captcha, status } } = await axios.post("http://localhost:3000/sendCroeCode", {
      mobile: mobile
    })
    if (status == 200) {
      setCaptcha(captcha);
    }
  }

  //验证验证码是否正确
  const nextCode = async () => {
    let { data: { code } } = await axios.post("http://localhost:3000/nextCode", {
      mobile: mobile,
      captcha: inputCaptcha
    })
    if (code == 200) {
      loginCode()
    } else {
      alert('验证码错误')
    }

  }

  //验证码登录
  const loginCode = async () => {

  }



  return (
    <div className='hht_login'>
      <div className='hhy_login_background'>
        <div className='hhy_login_box'>
          <div className='hhy_left_box'></div>
          <div className='hhy_reght_box'>
            <div className='hhy_naozi'>
              <div className='hhy_header'>饥不饥外卖配送站调度系统
                <div className='hhy_tech_support'>小默科技提供技术服务,加盟热线 13091236071</div></div></div>
            <div className='hhy_login_form_item'>
              <div className='hhy_login_form' style={{ display: 'flex' }}>
                <div className='hhy_login-type' onClick={handlePhoneLoginClick}>密码登录</div>
                <div className='hhy_login-type' onClick={handleCaptchaLoginClick}>验证码登录</div>
              </div>
              <div className='hhy_login_form_input'>
                <Form className="hhy_login-form">
                  <div className='hhy_login_form_input'>
                    {isPhoneLogin ? (
                      <div >
                        <Form.Item>
                          <Input
                            size="small" onChange={(e) => setMobile(e.target.value)} placeholder="用户名/手机号" prefix={<UserOutlined />} style={{ width: '50%', height: '40px' }} />
                        </Form.Item>
                        <Form.Item>
                          <Input size="small" type='password' onChange={(e) => setPassword(e.target.value)} placeholder="密码" prefix={<UnlockOutlined />} style={{ width: '50%', height: '40px' }} />
                        </Form.Item>
                        <div style={{ fontSize: '12px', color: '#999', width: '500px', marginLeft: '200px' }}>忘记密码</div>
                        <Form.Item>
                          <Button type="primary" onClick={login} style={{ width: '50%', height: '40px' }}>
                            登录
                          </Button>
                        </Form.Item>
                      </div>
                    ) : (
                      <div>
                        <Form.Item> <Input size="small" placeholder="手机号" onChange={(e) => setMobile(e.target.value)} prefix={<UserOutlined />} style={{ width: '50%', height: '40px' }} /></Form.Item>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                          <Form.Item><Input size="small" placeholder="验证码" onChange={(e) => setInputCaptcha(e.target.value)} prefix={<UserOutlined />} style={{ height: '40px' }} /></Form.Item>
                          <Form.Item><Button size="small" style={{ height: '40px' }} onClick={sendCroeCode}>发送验证码</Button></Form.Item>
                        </div>
                        <Form.Item>
                          <Button type="primary" onClick={nextCode} style={{ width: '50%', height: '40px' }}>
                            登录
                          </Button>
                        </Form.Item>

                      </div>
                    )}
                  </div>
                </Form>
              </div>
              <div className='hhy_usexieyi'></div>
            </div>
          </div>
        </div>
        <div className='hhy_text-overlay'>Copyright ◎ 2020-2099 Murin Studio. All Rights Reserved.
          <br />© 2020-2099 默林工作室 | 粤公网安备44020XXXX567890号粤ICP证2020XXXX567</div>
      </div>

    </div>
  )
}
